<template>
  <div class="dm_userCenter__content--common pwd">
    <el-row>
      <el-form
        :model="loginPwd"
        status-icon
        :rules="rules"
        ref="loginPwd"
        label-width="80px"
        size="small"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="手机号" prop="telephone">
              <el-input
                v-model="loginPwd.telephone"
                disabled
                style="width: 80%; margin-right: 6px;"
              />
              <el-button
                size="mini"
                round
                @click="sendMsg"
                v-if="statusMsg"
                disabled
                >发送验证码</el-button
              >
              <el-button size="mini" round @click="sendMsg" v-else
                >发送验证码</el-button
              >
              <span class="status">{{ statusMsg }}</span>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input v-model="loginPwd.code" maxlength="4" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="密码" prop="newUpwd">
              <el-input
                v-model="loginPwd.newUpwd"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="确认密码" prop="confirmNewUpwd">
              <el-input
                v-model="loginPwd.confirmNewUpwd"
                placeholder="请再次输入密码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="dm_userCenter__content--common__btn">
          <el-button
            style="width: 20%"
            size="small"
            @click="resetForm('loginPwd')"
            >清 空</el-button
          >
          <el-button
            type="primary"
            style="width: 20%"
            size="small"
            @click="submitForm('loginPwd')"
            >保 存</el-button
          >
        </div>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { updatePassword, getAuthCodeForUpdatePWD } from "@/api/login";
export default {
  props: {
    phone: String
  },
  data() {
    // 新密码 - 校验
    let validNewUpwd = (rule, value, callback) => {
      if (this.loginPwd.confirmNewUpwd !== null) {
        this.$refs.loginPwd.validateField("confirmNewUpwd");
      }
      callback();
    };
    // 确认密码 - 校验
    let validConfirmNewUpwd = (rule, value, callback) => {
      if (value !== this.loginPwd.newUpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      statusMsg: "",
      loginPwd: {
        telephone: this.phone,
        code: null,
        //oldUpwd: null,
        newUpwd: null,
        confirmNewUpwd: null
      },
      rules: {
        //oldUpwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        newUpwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validNewUpwd, trigger: ["blur", "change"] }
        ],
        confirmNewUpwd: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validConfirmNewUpwd, trigger: ["blur", "change"] }
        ]
      }
    };
  },
  methods: {
    sendMsg: function() {
      const self = this;
      if (self.timerid) {
        return false;
      }
      self.statusMsg = "";
      const params = {
        telephone: self.loginPwd.telephone
      };
      const res = getAuthCodeForUpdatePWD(params);
      if (res.status === 200 && res.data) {
        let count = 60;
        self.statusMsg = `验证码已发送,剩余${count--}秒`;
        self.timerid = setInterval(function() {
          self.statusMsg = `验证码已发送,剩余${count--}秒`;
          if (count === 1) {
            clearInterval(self.timerid);
            self.statusMsg = "";
          }
        }, 1000);
      } else {
        self.statusMsg = "";
      }
    },
    // 清空
    resetForm(refName) {
      this.$refs[refName].resetFields();
    },
    // 登录密码 - 表单校验
    submitForm(refName) {
      this.$refs[refName].validate(valid => {
        if (valid) {
          const params = {
            telephone: this.loginPwd.telephone,
            password: this.loginPwd.newUpwd,
            authCode: this.loginPwd.code
          };
          this.postUpdatePwdData(params);
        } else {
          return false;
        }
      });
    },
    // 修改 - 登录密码
    async postUpdatePwdData(params) {
      const res = await updatePassword(params);
      try {
        if (res.data.code === 200) {
          this.resetForm("loginPwd");
          this.$router.push({ path: "/login" });
        }
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>

<style lang="scss"></style>
